<!--
 * @Description:
 * @Author: hui
 * @Date: 2022-02-17 18:23:45
 * @LastEditTime: 2022-03-31 10:43:25
-->
<template>
	<div class="submitInfo">
        <!-- 提交成功 FP00000-->
        <div class="success-info" v-show="status == '1' && !flag">
            <el-icon color="#1EB294" :size=70><SuccessFilled /></el-icon>
            <p class="remark1">您已成功提交企业实名认证信息，请耐心等候审核结果</p>
            <p class="remark2">打款需要2-3个工作日，请关注系统更新信息，及时进行打款金额确认</p>
            <div class="btn-style">
                <el-button type="default" @click="handlePrevious"> 上一步 </el-button>
                <el-button type="primary" @click="handleResult(true)"> 刷新审核结果 </el-button>
            </div>
        </div>  
        <!-- 打款失败 KYC2009、KYC2016、KYC2019-->
        <div class="fail-info" v-show="status == '2'">
            <el-icon color="#ED5766" :size=70><WarningFilled /></el-icon>
            <p class="remark1">打款失败</p>
            <p class="remark2">您提交的企业实名认证信息未审核通过，请您修改信息后重新提交</p>
            <div class="btn-style">
                <el-button type="primary" @click="handleBack"> 返回修改认证信息 </el-button>
            </div>
        </div>  
        <!-- 审核通过，打款-->
        <div class="sh-success-info" v-show="status == '1' && flag">
            <div class="sh-top">
                <div><el-icon color="#2084C6" :size=18><WarningFilled /></el-icon></div>
                <div class="sh-top-content">
                    <p>1.您提供的企业实名认证信息合法有效，已审核通过。</p>
                    <p>2.阿里云已向收款方账户发起打款任务，实际打款到账时间以银行为准，预计3个工作日内到账。</p>
                    <p>3.请您在收到打款到账提醒后，尽快在该页面提交收款金额的认证。</p>
                </div>
            </div>
            <div class="sh-success-content">
                <el-form ref="infoFormRef" :model="infoForm" status-icon :rules="infoRules" class="demo-ruleForm" label-width="280px">
                    <el-form-item label="开户银行:" prop="username">
                        <p class="el-form-item-static">{{bankName}}</p>
                    </el-form-item>
                    <!-- <el-form-item label="银行所在地:" prop="username">
                        <p class="el-form-item-static">北京市朝阳区大屯街道</p>
                    </el-form-item>  -->
                    <el-form-item label="银行开户名:" prop="username">
                        <p class="el-form-item-static">{{companyName}}</p>
                    </el-form-item>       
                    <el-form-item label="企业银行卡账户:" prop="username">
                        <p class="el-form-item-static">{{bankNo}}</p>
                    </el-form-item>    
                    <el-form-item prop="amount" label="银行汇款金额:">
                        <el-input v-model="infoForm.amount" type="amount" placeholder="请输入汇款金额" class="span6"/> &nbsp;&nbsp;&nbsp;元
                        <div class="remark">
                            <div>银行汇款金额在0.01-0.99之间</div> 
                            <div>您有{{remainingTimes}}次验证机会，若{{remainingTimes}}次都输错金额，需重新认证</div>
                        </div>
                    </el-form-item>
                    <el-form-item class="span10">
                        <el-button :loading="isSaveLoading" type="primary" @click="submitForm"> 提交认证 </el-button>
                    </el-form-item>
                </el-form>
            </div> 
        
        </div>
	</div>
</template>
<script setup lang="ts">
import type { ElForm } from 'element-plus';

import { getCompanyVerify, getCompanyVerifyQuery } from '@/ajax/index';
import { ComponentInternalInstance, reactive, ref } from 'vue';

import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
	const { appContext } = getCurrentInstance() as ComponentInternalInstance;
	const proxy = appContext.config.globalProperties;
	type FormInstance = InstanceType<typeof ElForm>;
	// 路由
	const router = useRouter();
	// vuex
	const store = useStore();
	// 登录
	const infoFormRef = ref();
    const flag = ref(false);
    const isSaveLoading = ref(false);
    const shCode = ref('')
    const status = ref('')
    let props = defineProps({
        resultCode:{                           
            type:String,
        },
        status: {
            type:String,
        },
        formData:{
            type:Object
        }
    })
    const company_id = ref(``)
    const bankName = ref(``)
    const companyName = ref(``)
    const bankNo = ref(``)
    watch(()=>props.formData,()=>{
        if(props.formData&&props.formData.bankName){
            bankName.value= props.formData.bankName
        }
        if(props.formData&&props.formData.companyName){
            companyName.value= props.formData.companyName
        }
        if(props.formData&&props.formData.bankNo){
            bankNo.value= props.formData.bankNo
        }
        if(props.formData&&props.formData.id){
            company_id.value= props.formData.id
        }
    },{deep:true,immediate:true})
	const infoForm = reactive({
		'amount': ``,
        'companyId': ``
	});
	const infoRules = {
		'amount': [
			{
				'required': true,
				'message': `请输入汇款金额`,
				'trigger': `blur`
			},
		],
	};
    const remainingTimes = ref<any>(`5`)
	// 登录函数
	const submitForm = () => {
        infoFormRef.value.validate(async (valid: boolean) => {
			if (valid) {
				isSaveLoading.value = true;
                let sentData = {}
                infoForm.companyId = company_id.value
                sentData = JSON.parse(JSON.stringify(infoForm));
                
				let result = await getCompanyVerify(sentData);
                const code = result.content.code || ''
                const message = result.content.message || ''

				if (result.succ) {
                    if(code == 'FP00000'){
                        const activeSign = 'SuccessInfo'
                        const type = 'next'
                        emit('selectActiveSign', activeSign, type)
                    }else if(code == 'KYC2009'||code == 'FP09703'|| code == 'FP09008'){
                        status.value = `2`
                        ElMessage.error(message);
                    }else if(code == 'FP03333'){
                        if(result.content.remainingTimes&&result.content.remainingTimes!=5){
                            remainingTimes.value = remainingTimes
                            ElMessage.error(message);
                        }else{ 
                            status.value = `2`
                            ElMessage.error(message);
                        }
                    }
                    isSaveLoading.value = false;
                    // else if(code != 'FP03333' || code != 'FP09008'){
                    //     ElMessage.error(message);
                    //     isSaveLoading.value = false;
                    // }
				} else {
					isSaveLoading.value = false;
				}
			}
		});
	};
    const emit = defineEmits(['selectActiveSign']);
    //提交认证
    const submit = ()=>{
        const activeSign = 'SuccessInfo'
        const type = 'next'
        emit('selectActiveSign', activeSign, type)
    }
    const handlePrevious = ()=>{
        const activeSign = 'PublicInfo'
        const type = 'back'
        emit('selectActiveSign', activeSign, type)
    }
    const handleResult = async (val:boolean)=>{
        const companyId = company_id.value
        try {
            const res = await getCompanyVerifyQuery({id: companyId});
            const code = res.content.code || ''
            //FP03333
            if(code == 'FP00000'){
                status.value = `1`
            }else if(code == 'KYC2009' || code == 'KYC2016' || code == 'KYC2019' || code == 'FP09703'||code == 'FP03333' || code == 'FP09008') {
                //打款失败页面
                status.value = `2`
            }else if(code == 'KYC2013'){
                status.value = `3`
            }
            flag.value = val ? val : false
            // else if(code == 'FP03333' || code == 'FP09008'){
            //     //跳转到当前页面
            //     status.value = `2`
            // }
        } catch (error) {
            console.log(error);
        }
    }
    //返回修改认证信息
    const handleBack = () =>{
        // const activeSign = 'Information'
        // const type = 'back'
        // emit('selectActiveSign', activeSign,type)
        handlePrevious()
    }

    const created = () => {
        status.value = props.status ? props.status : '1'
        // handleResult(flag.value)
    };
    created();
	
</script>
<style lang="scss" scoped>
	.submitInfo {
		@extend %relative;
		background-image: url(../assets/images/login-bg.png);
       
        .success-info,.fail-info{
            text-align: center;
            margin-top: 20px;
            .remark1{
                color: #262626;
                font-size: 24px;
                font-weight: bold;
                margin: 25px 0 10px;
            }
            .remark2{
                color: #94979E;
                font-size: 13px;
                margin-bottom: 25px;
            }
        }
        :deep .el-form-item{
            margin-bottom: 5px;
        }
        .sh-success-info{
            .sh-success-content{
                display: flex;
                justify-content: center;
                margin-top: 30px;
                .remark{
                    color: #94979E;
                    font-size: 13px; 
                    line-height: 24px;
                    margin-bottom: 20px;
                    margin-top: 16px;
                }
            }
            .sh-top{
                background: #D0ECF1;
                padding: 10px;
                display: flex;
                .sh-top-content{
                    padding-left: 10px;
                }
            }
            ::v-deep .el-form-item__error{
                top: 30%;
                margin-bottom: 10px;
            }
           
        }
       
	}
   
</style>
